<section>
  <header>
    <h3>圆角图片</h3>
  </header>
  <article>
    <div class="example"><img src="docs/img/img1.jpg" width="200px" height="200px" class="img-rounded" alt="圆角图片"></div>
    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img1.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-rounded&quot; alt=&quot;圆角图片&quot;&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>圆形图片</h3></header>
  <article>
    <div class="example"><img src="docs/img/img2.jpg" width="200px" height="200px" class="img-circle" alt="圆形图片"></div>
    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img2.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-circle&quot; alt=&quot;圆形图片&quot;&gt;</code></pre>
  </article>
</section>

<section>
  <header><h3>缩略图</h3></header>
  <article>
    <div class="example"><img src="docs/img/img3.jpg" width="200px" height="200px" class="img-thumbnail" alt="缩略图"></div>
    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img3.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-thumbnail&quot; alt=&quot;缩略图&quot;&gt;</code></pre>
  </article>
</section>

<section>
  <header>
    <h3>响应式图片</h3>
  </header>
  <article>
    <p>图片最大宽度将不会超过父级容器。</p>
    <div class="example">
      <div style="width: 250px;" class="panel">
        <div class="panel-heading">我的宽度限定为250px</div>
        <img src="docs/img/img4.jpg" class="img-responsive" alt="响应式图片测试">
      </div>
    </div>
    <pre><code>&lt;img src=&quot;http://zui.sexy/docs/img/img4.jpg&quot; width=&quot;200px&quot; height=&quot;200px&quot; class=&quot;img-responsive&quot; alt=&quot;响应式图片测试&quot;&gt;</code></pre>
  </article>
</section>


<article>
  <div class="alert with-icon">
    <i class="icon-smile"></i>
    <div class="content">
      <p>非常感谢 <a class="alert-link" href="http://weibo.com/snowinfish" target="_blank">@snowinfish</a> 为本章节提供演示所用的全部图片。</p>
      <p class="margin-zero">图片仅供 ZUI 演示使用，未经作者授权，不得用作他用。</p>
    </div>
  </div>
</article>
